<script setup>

import HomePanel from "@/views/home/components/HomePanel.vue";
import {onMounted, ref} from "vue";
import {countCompletedPilesAPI} from "@/apis/api_pile.js";
const menu=ref({
  title:'桩基工程',
  subtitle:"共计492根,完成",
  blueprint:"设计施工图",
  boq:"工程量清单",
  quantity:"已施工工程量",
  construction_method_statement:"施工方案",
  technical_information:"技术质检资料",
  construction_record:"施工记录",
  product_quality:"质量",
  production_safety:"安全",
  construction_progress:"进度",
  labor:"人工",
  materials:"材料",
  machinery_equipment:"机械"
})
const list=ref([])

const getList=()=>{
  /*const res= getPileAPI()*/
  console.log("home list")

}
const picture=ref("./logo.svg")
const countCompletedPiles=ref(0)
const getCompletedPiles=async ()=>{
  const res=await countCompletedPilesAPI()
  countCompletedPiles.value=res.data
}
onMounted(()=>{
  getList()
  getCompletedPiles()
})
</script>

<template>
  <HomePanel :title="menu.title" :subtitle="menu.subtitle+countCompletedPiles+'根'">
    <ul class="list">
      <li class="small"><RouterLink to="/pile/pdf"> <img v-img-lazy="picture" alt="" />{{menu.blueprint}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.boq}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/quantity"><img src="./logo.svg" alt=""/>{{menu.quantity}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.construction_method_statement}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.technical_information}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.construction_record}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.product_quality}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.production_safety}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.construction_progress}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.labor}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.materials}}</RouterLink></li>
      <li class="small"><RouterLink to="/pile/list"><img src="./logo.svg" alt=""/>{{menu.machinery_equipment}}</RouterLink></li>
    </ul>

  </HomePanel>

</template>

<style scoped>
.list {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; /* 设置列表项之间的间距 */
}

.small {
  padding: 0.5rem;
  color: #3c0f0f;
  width: 220px;
  height: 220px;
  background-color: #f0f9f4;
  transition: all 0.5s;
}

.small:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
}

.small img {
  width: 106px;
  height: 106px;
}

.small p {
  font-size: 22px;
  padding-top: 12px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.small .num {
  color: #3c0f0f;
}
</style>